{% extends "base.html" %}
{% block content %}
<div class="container mt-4">
    <h2>我的课题 - 提交阶段进度</h2>

    {% if project %}
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">当前课题</div>
            <div class="card-body">
                <h5 class="card-title">{{ project.title }}</h5>
                <p><strong>开始日期：</strong> {{ project.start_date|date:"Y-m-d" }}</p>
                <p><strong>截止日期：</strong> {{ project.end_date|date:"Y-m-d" }}</p>
            </div>
        </div>

        <h4>提交进度</h4>
        <form method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
            {% csrf_token %}
            {{ form.as_p }}
            <button type="submit" class="btn btn-success">提交进度</button>
        </form>
    {% else %}
        <div class="alert alert-warning" role="alert">
            你尚未分配任何课题，请联系教师或管理员。
        </div>
        <!-- 模拟提交区域 -->
<div class="card mt-4">
    <div class="card-header bg-success text-white">
        提交阶段进度
    </div>
    <div class="card-body">
        <form>
            <div class="mb-3">
                <label for="progressContent" class="form-label">请输入当前进度内容：</label>
                <textarea class="form-control" id="progressContent" rows="5" placeholder="例如：已完成开题报告，正在撰写文献综述..."></textarea>
            </div>
            <button type="button" class="btn btn-primary" onclick="submitProgress()">提交进度</button>
        </form>

        <!-- 提示信息 -->
        <div id="progressMessage" class="mt-3 text-success" style="display: none;">
            进度已提交，等待教师审核。
        </div>
    </div>
</div>

<!-- JS 脚本 -->
<script>function submitProgress() {
    const content = document.getElementById('progressContent').value.trim();
    const messageBox = document.getElementById('progressMessage');

    if (content === '') {
        alert('请输入进度内容');
        return;
    }

    messageBox.style.display = 'block';
    document.getElementById('progressContent').value = '';
}
</script>
    {% endif %}
</div>
{% endblock %}
